import { Tabs, TabItem } from '@aws-amplify/ui-react';
import { Example, ExampleCode } from '@/components/Example';
import { BasicShoppingCard, AdvancedShoppingCard } from '../shared';
import { InstallScripts, TerminalCommand } from '@/components/InstallScripts.tsx';
import { Fragment } from '@/components/Fragment';

## Tutorial

In this brief tutorial, we're going to build a basic shopping cart component using [Vite.js](https://vitejs.dev/) and Amplify UI. Then, we'll elaborate on our shopping card to play with the possibilities of using Amplify UI.

### Setup and Installation

First, execute the command below in your terminal. When prompted for the name of your project, enter `amplify-ui-demo`.  Also see [Vite Guide](https://vitejs.dev/guide/).

<Tabs>
  <TabItem title="JavaScript">
    #### npm 7+
    <TerminalCommand command="npm create vite@latest amplify-ui-demo -- --template react && cd amplify-ui-demo"/>

    **Next, install the Amplify UI React package:**

    <TerminalCommand command="npm install @aws-amplify/ui-react aws-amplify"/>

    **When working with a [Vite](https://vitejs.dev) project you must make a few modifications. Please follow the steps below.**

    <Fragment>
      {({ platform }) => import(`../../troubleshooting/shared/vite-polyfill.mdx`)}
    </Fragment>

  </TabItem>
  <TabItem title="TypeScript">
    #### npm 7+
    <TerminalCommand command="npm create vite@latest amplify-ui-demo -- --template react-ts && cd amplify-ui-demo"/>
    **Next, install the Amplify UI React package:**

    <TerminalCommand command="npm install @aws-amplify/ui-react aws-amplify"/>

    **When working with a [Vite](https://vitejs.dev) project you must make a few modifications. Please follow the steps below.**

    <Fragment>
      {({ platform }) => import(`../../troubleshooting/shared/vite-polyfill.mdx`)}
    </Fragment>
    <Fragment>
      {({ platform }) => import(`../../troubleshooting/shared/vite-polyfill-ts.mdx`)}
    </Fragment>
  </TabItem>
</Tabs>

> If you are still having issues, please see comments on the following issue for additional [Vite workarounds](https://github.com/aws-amplify/amplify-js/issues/9639). Note that there is active ongoing work to make these modifications unnecessary.


### Basic Demo

Open up the project in your IDE and delete the contents of the `index.css` file. 

Next, replace the contents of the `App.jsx` or `App.tsx` file with the code below:

<Example>
  <ExampleCode>
  
```tsx file=./examples/BasicExampleCode.tsx

```

  </ExampleCode>
  <BasicShoppingCard />
</Example>

Now start the app by running `npm run dev` and you should see a basic shopping card component.

### Advanced Demo

If you’d like to play around with a more comprehensive demo of the Amplify UI library, create a separate file under the `pages` folder named `paintings.js`, and copy/paste this code into it:
<Example>
<ExampleCode>

```tsx file=./examples/paintings.ts

```

  </ExampleCode>
</Example>
Then, replace the contents of `App.jsx` or `App.tsx` with the code below, restart the app, and experience all the beautiful components in action!

<Example>
  <ExampleCode>

```tsx file=./examples/AdvancedExampleCode.tsx

```

  </ExampleCode>
  <AdvancedShoppingCard />
</Example>